<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test for Bug 1201798</title>
  <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="file_fullscreen-utils.js"></script>
  <style>
    html, body, #measure {
      width: 100%; height: 100%;
    }
    #ref-outer { width: 100px; height: 100px; overflow: scroll; }
    #ref-inner { width: 100%; height: 100%; }
  </style>
</head>
<body>
<div id="measure"></div>
<div style="height: 1000vh; width: 1000vw"></div>
<div id="ref-outer">
  <div id="ref-inner"></div>
</div>
<div id="fullscreen"></div>
<script type="text/javascript">

/** Test for Bug 1201798 */

var info = msg => opener.info("[scrollbar] " + msg);
var ok = (cond, msg) => opener.ok(cond, "[scrollbar] " + msg);
var is = (a, b, msg) => opener.is(a, b, "[scrollbar] " + msg);

var gVerticalScrollbarWidth, gHorizontalScrollbarWidth;
var gMeasureDiv = document.getElementById("measure");
var gFullscreenDiv = document.getElementById("fullscreen");

function getMeasureRect() {
  return gMeasureDiv.getBoundingClientRect();
}

function triggerFrameReconstruction() {
  info("Triggering a force frame reconstruction");
  var docElem = document.documentElement;
  var wm = window.getComputedStyle(docElem).writingMode;
  if (wm == "horizontal-tb") {
    docElem.style.writingMode = "vertical-rl";
  } else {
    docElem.style.writingMode = "horizontal-tb";
  }
  docElem.getBoundingClientRect();
}

function assertHasScrollbars(elem) {
  var rect = getMeasureRect();
  is(rect.width, screen.width - gVerticalScrollbarWidth,
     `Should have vertical scrollbar when ${elem} is in fullscreen`);
  is(rect.height, screen.height - gHorizontalScrollbarWidth,
     `Should have horizontal scrollbar when ${elem} is in fullscreen`);
}

function assertHasNoScrollbars(elem) {
  var rect = getMeasureRect();
  is(rect.width, screen.width,
     `Should not have vertical scrollbar when ${elem} is in fullscreen`);
  is(rect.height, screen.height,
     `Should not have horizontal scrollbar when ${elem} is in fullscreen`);
}

function checkScrollbars(elem, shouldHaveScrollbars) {
  is(elem, document.fullscreenElement,
     "Should only check the current fullscreen element");
  var assertFunc = shouldHaveScrollbars ?
    assertHasScrollbars : assertHasNoScrollbars;
  assertFunc(elem);
  triggerFrameReconstruction();
  assertFunc(elem);
}

function begin() {
  if (window.matchMedia("(-moz-overlay-scrollbar").matches) {
    // If overlay scrollbar is enabled, the scrollbar is not measurable,
    // so we skip this test in that case.
    info("Skip this test because of overlay scrollbar");
    opener.nextTest();
    return;
  }

  var rectOuter = document.getElementById("ref-outer").getBoundingClientRect();
  var rectInner = document.getElementById("ref-inner").getBoundingClientRect();
  gVerticalScrollbarWidth = rectOuter.width - rectInner.width;
  gHorizontalScrollbarWidth = rectOuter.height - rectInner.height;
  ok(gVerticalScrollbarWidth != 0, "Should have vertical scrollbar");
  ok(gHorizontalScrollbarWidth != 0, "Should have horizontal scrollbar");

  info("Entering fullscreen on root");
  addFullscreenChangeContinuation("enter", enteredFullscreenOnRoot);
  document.documentElement.requestFullscreen();
}

function enteredFullscreenOnRoot() {
  checkScrollbars(document.documentElement, true);
  info("Entering fullscreen on div");
  addFullscreenChangeContinuation("enter", enteredFullscreenOnDiv);
  gFullscreenDiv.requestFullscreen();
}

function enteredFullscreenOnDiv() {
  checkScrollbars(gFullscreenDiv, false);
  info("Exiting fullscreen on div");
  addFullscreenChangeContinuation("exit", exitedFullscreenOnDiv);
  document.exitFullscreen();
}

function exitedFullscreenOnDiv() {
  checkScrollbars(document.documentElement, true);
  info("Exiting fullscreen on root");
  addFullscreenChangeContinuation("exit", exitedFullscreenOnRoot);
  document.exitFullscreen();
}

function exitedFullscreenOnRoot() {
  opener.nextTest();
}

</script>
</body>
</html>
